<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <body>
    <div id="add">
      <p>实现一个简单的留言板</p>
      <div><p v-for="(item,index) in words">{{item}}-{{index}}</p></div>
      <div>
        <h2>展示留言</h2>
        <div v-for="(l,i) in list">
          <span>{{l.title}}</span>
          <button v-on:click="list.splice(i,1)">删除</button>
          <button v-on:click="setItemOne(l,i)">修改</button>
        </div>
      </div>
      <div>
        <h2>添加留言</h2>
        <p>
          <input type="text" v-model="text" />
          <button v-on:click="addData">提交</button>
        </p>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: "#add",
        data: {
          words: ["花好月圆", "圆圆满满", "满满当当", "当机立断", "断章取义"],
          list: [
            { title: "肤如凝脂" },
            { title: "吹弹可破" },
            { title: "如丝绸之光滑" },
            { title: "芦苇之柔韧" },
          ],
          text: "666快乐",
        },
        methods: {
          setItemOne(item, index) {
            let value = window.prompt(index, item.title);
            console.log(value);
            if (value) {
              // this.list.splice(index,1,{title:value})
              this.list[index].title = value;
            }
          },
          addData() {
            this.list.push({
              title: this.text,
            });
            this.text = "";
          },
        },
      });
    </script>
  </body>
</html>
